import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import dayjs from 'dayjs'

export function useStandardList() {
  const router = useRouter()

  // Table columns configuration
  const columns = ref([
    {
      title: '序号',
      width: '80px',
      customRender: ({ index }) => {
        return (query.pageNum - 1) * query.pageSize + index + 1
      },
    },
    {
      title: '产生时间',
      dataIndex: 'alarmTime',
      key: 'alarmTime',
    },
    {
      title: '产生点位',
      dataIndex: 'alarmLocation',
      key: 'alarmLocation',
    },
    {
      title: '所属区域',
      dataIndex: 'belongRegion',
      key: 'belongRegion',
    },
    {
      title: '预警类型',
      dataIndex: 'alarmType',
      key: 'alarmType',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      width: '120px',
    },
  ])

  // Data source and pagination
  const dataSource = ref<any[]>([])
  const total = ref(100)

  // Filter query and options
  const query = reactive({
    rangDate1: [],
    input1: '',
    select1: undefined,
    select2: undefined,
    pageNum: 1,
    pageSize: 10,
  })

  const options1 = ref<any[]>([
    { label: '定海区', value: '定海区' },
    { label: '普陀区', value: '普陀区' },
    { label: '岱山县', value: '岱山县' },
    { label: '嵊泗县', value: '嵊泗县' },
  ])

  const options2 = ref<any[]>([
    { label: '影响交通天气', value: '影响交通天气' },
    { label: '标签车辆上路', value: '标签车辆上路' },
    { label: '流量异常波动', value: '流量异常波动' },
    { label: '特殊日期预警', value: '特殊日期预警' },
    { label: '高速异常事件', value: '高速异常事件' },
  ])

  // Table operations
  const openDetail = (row) => {
    const type =
      row.alarmType == '高速异常事件'
        ? '1'
        : row.alarmType == '流量异常波动'
          ? '2'
          : row.alarmType == '特殊日期预警'
            ? '3'
            : row.alarmType == '影响交通天气'
              ? '4'
              : '5'

    router.push('/layout/alarmList/' + type + '/' + row.id)
  }

  // Data fetching
  const getList = async () => {
    // Generate mock data
    const mockData = Array.from({ length: 100 }, (_, i) => {
      const now = new Date()
      const randomHours = Math.floor(Math.random() * 24)
      const randomMinutes = Math.floor(Math.random() * 60)
      now.setHours(now.getHours() - randomHours)
      now.setMinutes(now.getMinutes() - randomMinutes)
      
      const regionIndex = Math.floor(Math.random() * options1.value.length)
      const alarmIndex = Math.floor(Math.random() * options2.value.length)
      
      return {
        id: i + 1,
        alarmTime: now.toLocaleString(),
        alarmLocation: `点位${Math.floor(Math.random() * 1000)}`,
        belongRegion: options1.value[regionIndex].value,
        alarmType: options2.value[alarmIndex].value,
        status: (i % 4) + 1
      }
    })

    // Apply filtering if any query params are set
    let filteredData = mockData
    if (query.select1) {
      filteredData = filteredData.filter(item => item.belongRegion === query.select1)
    }
    if (query.select2) {
      filteredData = filteredData.filter(item => item.alarmType === query.select2)
    }
    if (query.input1) {
      filteredData = filteredData.filter(item => 
        item.alarmLocation.includes(query.input1))
    }

    // Paginate results
    const startIndex = (query.pageNum - 1) * query.pageSize
    const paginatedData = filteredData.slice(startIndex, startIndex + query.pageSize)
    
    dataSource.value = paginatedData
    total.value = filteredData.length
  }

  const searchHandle = () => {
    query.pageNum = 1
    getList()
  }

  const onChange = (pageNumber: number) => {
    console.log('Page: ', pageNumber)
    getList()
  }

  onMounted(() => {
    getList()
  })

  return {
    columns,
    dataSource,
    total,
    query,
    options1,
    options2,
    openDetail,
    getList,
    searchHandle,
    onChange,
  }
}
